<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html> 
<head> 
	<title>Login</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="styles/jquery.mobile-1.2.0.min.css" />
	<script src="scripts/jquery-1.8.2.min.js"></script>
	<script src="scripts/jquery.mobile-1.2.0.min.js"></script>
	<style>
	.center-wrapper{
		text-align: center;
	}
	.ui-page
	{
		background-image:url(<c:url value='/images/bg.png'/>);
		background-size:cover;  
	}
	</style>
	<script type="text/javascript">
	$('.ui-page').live("pagecreate", function() {
		$('.ui-content').height($(window).height()*0.8);
   	});
	
	$(document).ready(function () {
		  
		//$('.ui-content').height($(window).height()*0.8);
			 
		
        $('#Login').click(function () {        	
            if ($('#userName').val() == "" || $('#password').val() == "") {
                $("#popupBasic").popup("open");
            }
            else {
                $.ajax({
                    type: "POST",
                    url: '<c:url value="/user/login3.do"/>',
                    data: "userName=" + escape($('#userName').val()) + "&password=" + escape($('#password').val()),
                    beforeSend: function () {
                    	$.mobile.showPageLoadingMsg();
                    },
                    success: function (msg) {
                        if (msg == "success") {
                            //parent.tb_remove();
                            top.location.href = '<c:url value="/pages/user/login_success.jsp"/>'; //如果登录成功则跳到管理界面
                        }
                        if (msg == "failed") {
                        	$("#popupFailed").popup("open");
                        }
                    },
                    complete: function (data) {
                    	$.mobile.hidePageLoadingMsg();
                    },
                    error: function (XMLHttpRequest, textStatus, thrownError) {
                    }
                });
            }
        });
    });
		
	</script>
</head> 
<body> 
<div data-role="page">

	<div data-role="header">
		<h1>Jquery Mobile</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<div class="center-wrapper"><h1>Login</h1></div>
		<form action="" method="post" style="height:100%">
			<div data-role="fieldcontain" class="ui-hide-label">				
				<input type="text" name="userName" id="userName" value="" data-mini="true" placeholder="Username"/>
			</div>
			<div data-role="fieldcontain" class="ui-hide-label">				
				<input type="password" name="password" id="password" value="" data-mini="true" placeholder="Password"/>
			</div>
			<input id="Login" type="button" value="Login">
		</form>		
		<div data-role="popup" id="popupBasic">
			<p>用户名或密码不能为空！<p>
		</div>
		<div data-role="popup" id="popupFailed">
			<p>用户名或密码错误！<p>
		</div>		
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>